<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/donate.css">
    <!-- test -->
</head>

<body>
    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button class="btn-footer btn-red" onclick="showDBottom();">立即捐款</button>
            <button class="btn-footer btn-yellow">我也发起一起捐</button>
        </div>
    </footer>
    <section class="ui-container">
        <div class="top-banner">
            <img class="success" src="../images/ic_success.png" alt="">一起捐发起成功！
        </div>
        <div class="top-banner">
            点击右上角，发送给朋友创建一起捐！<img class="share" src="../images/ic-share.png" alt="">

        </div>
        <div class="backdrop active"></div>
        <div class="top-info">
            <div class="top">
                <img class="img-top" src="../images/img-yqj-top-bg.png" alt="">
                <div class="wrap">
                    <a href="#" class="ui-avatar">
                        <span style="background-image:url(../images/demo/demo-avatar-1.jpg)"></span>
                    </a>
                    <h4>张三 要你一起捐</h4>
                </div>
            </div>
            <p>“我为这个公益项目发起筹款，相信世界的改变不因少数人的很大努力，而因大多数人的一点点。”</p>
        </div>
        <div class="banner-wrap">
            <img src="../images/img-invite.png" alt="">
            <div class="banner ui-flex">
                <div class="left">
                    <div><em>0</em>人</div>
                    <div>参与人数</div>
                </div>
                <div class="center">
                    <div>捐款目标：<em>不限</em></div>
                </div>
                <div class="right">
                    <div><em>0</em>人</div>
                    <div>捐款金额</div>
                </div>
            </div>
        </div>
        <div class="u-module-title style1">捐助的项目</div>
        <div class="u-module-wrap">
            <div class="ui-placehold ui-placehold-img">
                <span style="background-image:url(../images/demo/demo-project-1.jpg)">
                <div class="h3-box"><h3>3万留守儿童的渴望</h3></div>
                <div class="status">募集中</div>
            </span>
            </div>
            <div class="u-module style1">
                <div class="ui-progress-box">
                    <div class="ui-progress">
                        <span style="width:50%"></span>
                    </div>
                    <div class="ui-progress-val">20%</div>
                </div>
                <ul class="ui-row top-infos">
                    <li class="ui-col ui-col-50">
                        <p>目标 1000元</p>
                    </li>
                    <li class="ui-col ui-col-50">
                        <p>剩余天数 10天</p>
                    </li>
                    <li class="ui-col ui-col-50">
                        <p>还差 <i>2200元</i></p>
                    </li>
                    <li class="ui-col ui-col-50">
                        <p>捐助人数 <i>2049人</i></p>
                    </li>
                </ul>
            </div>
        </div>
        <img class="img-bottom" src="../images/logo_and_txt.png" alt="" class="ui-introduction">
    </section>
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
    $(function() {
        $('.p-tag-list .p-tag').click(function() {
            $(this).addClass('active').siblings('.p-tag').removeClass('active');
            $('.donate-form .input-box').removeClass('active');
        });

        $('.donate-form .input-box input').click(function() {
            $('.p-tag-list .p-tag').removeClass('active');
            $(this).parent().addClass('active');
        });

        $('.dialog-step .dialog-box .btn-close').click(function() {
            $('.dialog-step').removeClass('show');
        });
    })

    function showDeal() {
        $('.dialog-step').addClass('show');
        return false;
    }
    </script>
</body>

</html>
